<script setup lang="ts">
import { ABNORMAL_TOP, DOWN, page, commFun, TabType } from "./scripts/tabList";
import { ref, onMounted, watch, computed } from "vue";
import { tabKeys } from "./scripts/tabList";
import { get } from "@/comm/request";
import { URL_ABNORMAL_TOP_DOWN } from "@/comm/api";
import { formatBigNumber } from "@/comm/format";
import jNumber from "@/components/j-number/index.vue";
import jString from "@/components/j-string/index.vue";
import Empty from "@/components/j-empty/index.vue";
import JLoding from "@/components/j-loding/index.vue";
import i18n from "@/locals";

// const navs = ['# 代币', '涨跌', '差价'];
const navs = [
    "#",
    i18n.global.t("message.TabB.a"),
    i18n.global.t("message.TabB.b")
    // i18n.global.t('message.TabB.c'),
];

const loding = ref(true);

const key = ref(tabKeys.tab2_key);
const ListArr = ref<DOWN[]>([]);

const getdate = async function () {
    loding.value = true;
    const res: ABNORMAL_TOP<DOWN> = await get(URL_ABNORMAL_TOP_DOWN, { periodType: key.value.value });

    if (res.success) {
        ListArr.value = [];
        setTimeout(() => {
            loding.value = false;
            ListArr.value = res.data;
            idx.value = 1;
        }, 500);
        // console.log('yzt tab res 的数据', res);
    } else {
        console.log("yzt tab res 的数据错误", res);
        loding.value = false;
    }
};

//分页拿取请求回来的数据
const idx = ref(1);
const sum = page.sum;
const listArr_ = computed(() => ListArr.value.slice((idx.value - 1) * sum, idx.value * sum));

watch(key, () => getdate());
onMounted(() => getdate());
</script>

<template>
    <JLoding v-if="loding"></JLoding>
    <div class="tab">
        <VRow class="nvas c-title-5 px-5 my-2">
            <VCol v-for="(item, idx) in navs" :class="`col${idx}`" :cols="commFun.getIdx(TabType.TabB, idx)">
                <p class="navs_title">{{ item }}</p>
            </VCol>
        </VRow>
        <div class="bdy overflow-y-hidden overflow-x-hidden">
            <Empty v-if="listArr_.length === 0"></Empty>
            <VRow class="c-title-4 px-5" v-for="(item, idx_) in listArr_">
                <VCol :cols="commFun.getIdx(TabType.TabB, 0)" class="col0">
                    <span style="color: var(--color)">{{ idx_ + 1 }}</span>
                </VCol>
                <VCol :cols="commFun.getIdx(TabType.TabB, 1)" class="col1 d-flex">
                    <img :src="commFun.getIcon(item.symbol)" class="mr-2" @click="console.log(item)"/>
                    <span class="y-link" @click="commFun.openToken(item.baseToken)"><jString :text="item.symbol" bold></jString></span>&nbsp;&nbsp;
                    <jString :text="item.name" color="var(--color)"></jString>
                    <!-- <span style="color: var(--color);">{{ item.name }}</span> -->
                </VCol>
                <VCol :cols="commFun.getIdx(TabType.TabB, 2)" class="col2">
                    <!-- <span>${{ formatBigNumber(item.fdvUsd) }}</span>&nbsp; -->
                    <!-- <jNumber :num="formatBigNumber(item.fdvUsd)" prefix="$" :notbold="true" notformat price></jNumber>&nbsp; -->
                    <jNumber :num="item.baseTokenPriceUsd" prefix="$" :origin="true" :notbold="true" price></jNumber>&nbsp;
                    <jNumber :num="key.value === 'H' ? item.priceChangeH1 : item.priceChangeH24" :origin="true" :suffix="'%'" :is-color="true"></jNumber>
                </VCol>
            </VRow>
        </div>
        <!-- <v-pagination :length="Math.ceil(ListArr.length / sum)" :total-visible="3" v-model="idx"></v-pagination> -->
    </div>
</template>

<style lang="less" scoped>
.col2 {
    width: 50%;
    position: absolute;
    right: 10px;
    text-wrap: nowrap;
    text-align: right;
}
</style>
